<template>
    <div class="demo-basic">
        <section>
            <h3>方案一</h3>
            <p>
                <z-page :total="100" :current="2" @on-change="handler" @on-page-size-change="handler"></z-page>
            </p>
        </section>
        <pre>
            <code>
        &lt;z-page :total=&quot;100&quot; :current=&quot;2&quot; @on-change=&quot;handler&quot; @on-page-size-change=&quot;handler&quot;&gt;&lt;/z-page&gt;
            </code>
        </pre>

        <section>
            <h3>方案二</h3>
            <p>
                <z-page simple :total="100" :current="2" @on-change="handler" @on-page-size-change="handler"></z-page>
            </p>
        </section>
        <pre>
            <code>
        &lt;z-page simple :total=&quot;100&quot; :current=&quot;2&quot; @on-change=&quot;handler&quot; @on-page-size-change=&quot;handler&quot;&gt;&lt;/z-page&gt;
            </code>
        </pre>
    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default {
        data () {
            return {
                arr: [20, 30, 40]
            }
        },
        methods: {
            handler: function () {}
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>
